<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="display" uri="/WEB-INF/tags/displaytag-12.tld"%>

<html>
<head>
<meta name="tab" content="track" />
<meta name="decorator" content="HeaderFooter" />
<link href="<s:url value="/webwork/jscalendar/calendar-blue.css" />"
	rel="stylesheet" type="text/css" media="all" />
</head>
<script type="text/javascript" src="js/calendar.js"></script>
<script type="text/javascript" src="js/calendar-en.js"></script>
<script type="text/javascript" src="js/calendar-setup.js"></script>
<script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBl-1kmeYgZ8kS_L9_LqfeO481d_zKW6i4&sensor=false">
    </script>
    
<script>
 function loadWardList(ref, wardId) {
		try
		
		{
			//alert("laodWardLIst");
			var appContextPath = "<%= request.getContextPath()%>";
			jsonrpc = new JSONRpcClient(appContextPath + "/JSON-RPC");
			var zoneId = ref.options[ref.options.selectedIndex].value;           
			var result = jsonrpc.wards.getWardList(zoneId);
			//alert(result);
			var eWardObj = document.getElementById(wardId);
			var eventLength = eWardObj.options.length;
			
			for(i=eWardObj.options.length -1;i>=0 ;i--)
			{
					eWardObj.options[i] = null;
			}
			eWardObj.options[0] = new Option('Select Ward','-l');
			
			if( result !=null && result.list.length > 0)
			{

				for(i=0,j=1;i < result.list.length;i++)
				{
					var id = result.list[i].fieldName;
					var value = result.list[i].fieldValue;
					eWardObj.options[j++] = new Option(value,id);
				}
			}
		}
		catch(e) {
		alert(e);
		}
		zoneId = ref.options[ref.options.selectedIndex].value; 
		if('-1' == zoneId)  {
		   document.getElementById('wardId').disabled="disabled";
	   	}else{
	   	 document.getElementById('wardId').disabled=false;
	   	}
		}
 
 function initialize() {
		var myOptions = {
			center: new google.maps.LatLng(21.14900241815646, 79.08094482216802),
			zoom: 12,
			mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
		
	}

	
		
</script>

<body onload="initialize()">

<s:form name="searchTrackForm" theme="swm_theme" id="addBitForm"
	action="searchTrack.action" method="post">

<div id="container" >
			<div id="content">
				<div id="map_canvas" style="margin: 10px; height: 450px"></div>
			</div>
			<div id="sidebar">
			<div id="locateTrackSideBar" style="display:block">
			<table id="ctl00_cph1_tblTest" cellspacing="0" cellpadding="0"
				border="0" class="tblEntryForm">
				<tr class="trHeaderEntryForm">
					<th width="123" colspan="3">Search By Area</th>
				</tr>
					<tr>
						<td>Select Zone</td>
						<td>:</td>
						<td><s:select id="zoneId" name="zoneId" cssClass="dropdown" 
	                            value="%{zoneId}" headerKey="-1" headerValue="Select Zone" 
				 			onchange="javascript:loadWardList(this,'wardId');" 
				  			list="zoneList" listKey="id" listValue="name" onselect="true"/>
				  			<span class="mandetory">*</span>
				  		</td>
					</tr>
					<tr>
						<td>Select Ward</td>
						<td>:</td>
						<td>
	                        <s:select  name="wardId" id="wardId" cssClass="dropdown"
							list="wardList" listKey="id" listValue="name"
							headerKey="none" headerValue="Select Group"
							value="Select Ward"  /><span class="mandetory">*</span>
						</td>
					</tr>
				<tr class="trHeaderEntryForm">
					<th width="123" colspan="3">Search By Employee </th>
				</tr>
				<tr>
					<td><s:label value="Search" tooltip="Search By Name,Id,Area" required="true"></s:label></td>
					<td style="text-align: center">:</td>
					<td><s:textfield name="searchTxt" cssStyle="width: 130px;"
						cssClass="textbox" value="%{bit.bitName}" id="bitName"
						maxLength="100" /></td>
				</tr>
				
			</table>
			</div>
			</div>
</div>			

	<%-- <div id="content-container">
	<table border="0" cellpadding="0" cellspacing="0">
		<tr>
		<td valign="top">
			<table id="Table1" cellspacing="0" cellpadding="0" border="1"
				class="tblEntryForm">

							<tr>
								<td>
									<div id="content">
										<div id="map_canvas" style="width: 625px; height: 400px"></div>
									</div>
								</td>
							</tr>
						</table>
			</td>
			<td>
			<table id="ctl00_cph1_tblTest" cellspacing="0" cellpadding="0"
				border="0" class="tblEntryForm">
				<tr class="trHeaderEntryForm">
					<th width="123" colspan="3">Search By Area</th>
				</tr>
					<tr>
						<td>Select Zone</td>
						<td>:</td>
						<td><s:select id="zoneId" name="zoneId" cssClass="dropdown" 
	                            value="%{zoneId}" headerKey="-1" headerValue="Select Zone" 
				 			onchange="javascript:loadWardList(this,'wardId');" 
				  			list="zoneList" listKey="id" listValue="name" onselect="true"/>
				  			<span class="mandetory">*</span>
				  		</td>
					</tr>
					<tr>
						<td>Select Ward</td>
						<td>:</td>
						<td>
	                        <s:select  name="wardId" id="wardId" cssClass="dropdown"
							list="wardList" listKey="id" listValue="name"
							headerKey="none" headerValue="Select Group"
							value="Select Ward"  /><span class="mandetory">*</span>
						</td>
					</tr>
				<tr class="trHeaderEntryForm">
					<th width="123" colspan="3">Search By Employee </th>
				</tr>
				<tr>
					<td><s:label value="Search" tooltip="Search By Name,Id,Area" required="true"></s:label></td>
					<td style="text-align: center">:</td>
					<td><s:textfield name="searchTxt" cssStyle="width: 130px;"
						cssClass="textbox" value="%{bit.bitName}" id="bitName"
						maxLength="100" /></td>
				</tr>
				
			</table>
			</td>
			
		</tr>
	</table>
	</div> --%>
</s:form>

</body>
</html>
